<template>
    <section>
        <div class="bon-container">
            <div class="header flex-box flex-box-display">
                <h4>{{title}}</h4>
                <div>
                    <el-button type="primary" @click="addItem">添加优惠券</el-button>
                </div>
            </div>
            <div class="bon-con">
                <el-table :data="bonusesList" style="width: 100%">
                    <el-table-column :resizable="false" label="分类" width="140">
                        <template slot-scope="scope">
                            <span>{{scope.row.bonuse_category_id}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="false" label="名称" width="140">
                        <template slot-scope="scope">
                            <span>{{scope.row.name}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="false" label="编号">
                        <template slot-scope="scope">
                            <span>{{scope.row.sn}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="false" label="优惠金额">
                        <template slot-scope="scope">
                            <span>{{scope.row.money}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="false" label="允许使用所需最大金额">
                        <template slot-scope="scope">
                            <span>{{scope.row.max_amount}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="false" label="允许使用所需最小金额">
                        <template slot-scope="scope">
                            <span>{{scope.row.min_amount}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="false" label="使用开始时间">
                        <template slot-scope="scope">
                            <span>{{scope.row.type}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="false" label="使用结束时间">
                        <template slot-scope="scope">
                            <span>{{scope.row.min_amount}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="false" label="使用时间">
                        <template slot-scope="scope">
                            <span>{{scope.row.distribute_number}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="false" label="使用状态">
                        <template slot-scope="scope">
                            <span>{{scope.row.used_number}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="false" label="操作">
                        <template slot-scope="scope">
                            <el-button @click="showItem(scope.$index)"
                                       type="text"
                                       size="small" icon="el-icon-view"></el-button>
                            <el-button @click="editItem(scope.$index)"
                                       type="text" size="small"
                                       icon="el-icon-edit-outline"></el-button>
                            <el-button @click="deleteItem(scope.$index, scope.row.id)" type="text"
                            size="small" icon="el-icon-delete"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination">
                <div>
                    共{{page.count}}页，每页{{pageSize}}条
                </div>
                    <el-pagination layout="prev, pager, next" :total="page.total"
                                   @current-change="handleCurrentChange">
                    </el-pagination>
            </div>
        </div>
        <el-dialog
                title="优惠券信息"
                :visible.sync="dialogVisible"
                :before-close="handleClose"
                width="40%">
            <form-row :label="`分类`">
                <div slot="item" class="form-row__item">{{showList.bonuse_category_id}}</div>
            </form-row>
            <form-row :label="`名称`">
                <div slot="item" class="form-row__item">{{showList.name}}</div>
            </form-row>
            <form-row :label="`编号`">
                <div slot="item" class="form-row__item">{{showList.sn}}</div>
            </form-row>
            <form-row :label="`用户`">
                <div slot="item" class="form-row__item">{{showList.use_id}}</div>
            </form-row>
            <form-row :label="`优惠金额`">
                <div slot="item" class="form-row__item">{{showList.money}}</div>
            </form-row>
            <form-row :label="`最小金额`">
                <div slot="item" class="form-row__item">{{showList.min_amount}}</div>
            </form-row>
            <form-row :label="`最大金额`">
            <div slot="item" class="form-row__item">{{showList.max_amount}}</div>
            </form-row>
            <form-row :label="`使用开始时间`">
                <div slot="item" class="form-row__item">{{showList.use_start_date}}</div>
            </form-row>
            <form-row :label="`使用结束时间`">
                <div slot="item" class="form-row__item">{{showList.use_end_date}}</div>
            </form-row>
            <form-row :label="`使用时间`">
                <div slot="item" class="form-row__item">{{showList.use_date}}</div>
            </form-row>
            <form-row :label="`使用状态`">
                <div slot="item" class="form-row__item">{{showList.status}}</div>
            </form-row>
            <form-row :label="`创建时间`">
                <div slot="item" class="form-row__item">{{showList.created_at}}</div>
            </form-row>
            <form-row :label="`更新时间`">
                <div slot="item" class="form-row__item">{{showList.updated_at}}</div>
            </form-row>
        </el-dialog>
    </section>
</template>

<script>
    import FormRow from '../../components/basic/FlowRow.vue';

    export default {
        components: {
            FormRow
        },
        data() {
            return {
                title:'',
                bonusesList: [],
                showList: [],
                dialogVisible: false,
                tableLoading: false,
                page: {
                    total: null,
                    count: null
                },
                pageSize:20
            }
        },
        created(){
            this.title = this.$route.params.title;
            this.id = this.$route.params.id;
        },
        computed: {},
        mounted() {
            this.getBonusesList();
        },
        methods: {
            getBonusesList(pagination = 1) {
                axios
                    .get('admin_bonus_categories/distribute', {
                        params: {
                            bonuse_category_id:this.id,
                            pagination
                        }
                    })
                    .then(res => {
                        this.page.total = res.data.count;
                        this.page.count = Math.ceil(res.data.count / this.pageSize)
                        return res;
                    })
                    .then(res => res.data.data)
                    .then(res => {
                        console.log('数据', res);
                        if (res) {
                            res.forEach(item => {
                                item.edit = false;
                            })
                        }

                        this.bonusesList = res;
                        this.tableLoading = false;

                    })
            },
            // deleteItem(index, id) {
            //     this.$confirm('是否确认删除该优惠券?', '提示', {
            //         confirmButtonText: '确定',
            //         cancelButtonText: '取消',
            //         type: 'warning'
            //     })
            //         .then(() => {
            //             return axios
            //                 .post(`admin_bonus_categories/${id}`, {_method: 'DELETE'})
            //                 .then(
            //                     res => (res.data.status === 1 ? Promise.resolve() : Promise.reject(res.data.msg))
            //                 );
            //         })
            //         .then(() => {
            //             this.$message({
            //                 type: 'success',
            //                 message: '删除成功!'
            //             });
            //             this.getBonusesList();
            //         })
            //         .catch(err => {
            //             this.$message.error(err);
            //         });
            // },
            isEditItem(index) {
                this.bonusesList[index].edit = !this.bonusesList[index].edit
            },
            genData(data, id) {
                console.log('要提交的数据', data);
                console.log('得到的数据',
                    typeof data.id,
                    typeof data.name,
                    typeof data.money,
                    // status: 1,
                    // typeof 1,
                    typeof data.min_amount,
                    // typeof data.max_amount,
                )
                const tem = {
                    // id: data.id,
                    name: data.name,
                    money: data.money,
                    // status: 1,
                    // type: 1,
                    min_amount: data.min_amount,
                    // max_amount: data.max_amount,

                };
                if (id) {
                    tem.id = data.id;
                    tem._method = 'PUT';
                }
                return tem;
            },
            // postData(data,id){
            //     axios
            //         .post(`admin_bonus_categories/${id || ''}`,data)
            //         .then(res => {
            //             console.log('res',res)
            //             return res.data.status === 1 ? Promise.resolve(res.data.data) : Promise.reject(res.data.msg);
            //         })
            // },
            submitItem(index, row, id) {
                const data = this.genData(row, id);
                console.log('才',data)
                axios
                    .post(`admin_bonus_categories/${id || ''}`, data)
                    .then(res => {
                        console.log('res', res)
                        return res.data.status === 1 ? Promise.resolve(res.data.data) : Promise.reject(res.data.msg);
                    })
                    .then(data => {
                        console.log('提交后', data)
                        if (!id) {
                            this.$message({
                                type: 'success',
                                message: '优惠券添加成功!'
                            });
                        } else {
                            this.$message({
                                type: 'success',
                                message: '修改成功!'
                            });
                        }
                        this.getBonusesList()
                    })
                    .catch(err => {
                        this.$message({
                            type: 'error',
                            message: `修改失败 ${err}`
                        });
                    });
            },
            cancel() {
                this.getBonusesList()
            },
            showItem(index) {
                this.handleClose();
                this.showList = this.bonusesList[index];
                console.log('展示', this.showList)
            },
            editItem(index) {
                this.isEditItem(index);
            },
            addItem() {
                this.$router.push({name: 'BonusesAdd', params: {title: '添加', method: 0, value: null}});
            },
            detailList() {
                this.$router.push({name: 'BonusesUserList', query: {id: id}});
            },
            handleClose() {
                this.dialogVisible = !this.dialogVisible;
            },
            handleCurrentChange(current) {
                this.getCategoryList(current);
            }
        }
    }
</script>
<style scoped>
    .bon-container {
        margin: 25px;
        border-radius: 4px;
        background: #fff;
        min-height: calc(100vh - 92px);
    }

    .flex-box {
        display: flex;
    }

    .flex-box-display {
        justify-content: space-between;
    }

    .header {
        padding: 10px;

        border-bottom: 1px solid #d8d8d8;
    }

    .bon-con {
        min-height: 100vh;
        padding: 20px;
    }

    .pagination {
        display: flex;
        align-items: center;
        justify-content: space-around;

        width: 100%;
    }

</style>